//main
import React, { useContext } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { ThemeProvider, List } from "@material-ui/core";
import * as icons from "@material-ui/icons";
//data
import Context from "../../Context.js";
//styles
import { useStyles } from "./Navbar.jss";
//funcs
import ChatItem from "./ChatItem";
import AddPlace from "./AddPlace.js";

function NavBar(props) {
  const { theme, setCurrentChat } = useContext(Context);
  const classes = useStyles(theme);
  return (
    <ThemeProvider theme={theme}>
      <div className={classes.navbar}>
        <AddPlace />
        <List style={{ overflow: "auto", height: "100%" }}>
          <ChatItem />
        </List>
        <div className={classes.profile}>
          <div className={classes.profileName}>{userNameRender()}</div>
          <Link
            className={classes.profileSettings}
            to="/account"
            style={{ textDecoration: "none" }}
            onClick={() => {
              setCurrentChat("");
            }}
          >
            <icons.Settings fontSize="small" color="action" />
          </Link>
        </div>
      </div>
    </ThemeProvider>
  );

  //try get username from storage
  //return <null>, if can't get
  function userNameRender() {
    try {
      return props.account.userName;
    } catch (err) {
      return "<null>";
    }
  }
}

const mapStateToProps = (state) => {
  return {
    account: state.account.account,
  };
};

const mapDispathToProps = {};

export default connect(mapStateToProps, mapDispathToProps)(NavBar);
